
// 实现懒加载 Hook
import { useEffect, useRef } from 'react';

function useLazyLoad(ref: React.RefObject<HTMLImageElement>) {
  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting && ref.current) {
        ref.current.src = ref.current.dataset.src!;
        observer.disconnect();
      }
    });
    if (ref.current) observer.observe(ref.current);
    return () => observer.disconnect();
  }, [ref]);
}

// 实现懒加载组件
const Image: React.FC<{ src: string }> = ({ src }) => {
  const ref = useRef<HTMLImageElement>(null);
  useLazyLoad(ref);
  return <img ref={ref} data-src={src} />;
};